<template>
    <customNavigationBar title="设置" />

    <view class="items">
        <view class="item" @click="changePSW">
            <view class="title">修改密码</view>
            <view class="more">
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>

        <view class="item" @click="goAgreement(2)">
            <view class="title">隐私政策</view>
            <view class="more">
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>

        <view class="item" @click="goAgreement(1)">
            <view class="title">使用许可协议</view>
            <view class="more">
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>

        <view class="item">
            <view class="title">当前版本</view>
            <view class="more">
                <span>{{ appVersion }}</span>
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>

        <view class="item" @click="clearCache">
            <view class="title">清除缓存</view>
            <view class="more">
                <span>{{ cacheSize }}</span>
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>
        <view class="item" @click="kfOpen">
            <view class="title">联系客服</view>
            <view class="more">
                <span>客服接待时间：周一~周五 10:00 - 19:00</span>
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>
        <view class="item" @click="delAccount">
            <view class="title">删除账号</view>
            <view class="more">
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view>

        <!--  <view class="item" @click="feedbackMessage">
            <view class="title">反馈建议</view>
            <view class="more">
                <image src="/static/common/icon_more.png"></image>
            </view>
        </view> -->
    </view>

    <view class="logout" @click="logout">
        <view>退出登录</view>
    </view>

    <uni-popup ref="delAccountPopup" type="center" mask-background-color="rgba(0,0,0,0)" :is-mask-click="false">
        <view class="CBTruleContent">
            <view class="title">二次确认</view>
            <view class="tips">此操作会清空您账号中的所有数据且无法恢复，请输入您的登录密码进行二次确认，密码验证通过将执行删除账号操作。</view>
            <view class="input">
                <text>登录密码：</text>
                <input type="text" v-model="psd" password placeholder="请输入密码进行二次确认" />
            </view>

            <view class="button">
                <view @click="delAccountPopupClose">取消</view>
                <view @click="delAccountPopupConfirm">确认</view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { nextTick, ref } from 'vue';
import { userApis } from '../../utils/apis';
import env from '@/config/env';
import { checkStrLengthIsNotZero, encryption } from '@/utils/utils';
const changePSW = () => {
    uni.navigateTo({
        url: '/pages_user/editPassword/editPassword'
    });
};

const feedbackMessage = () => {
    uni.navigateTo({
        url: '/pages_user/feedbackMessage/feedbackMessage'
    });
};

const goAgreement = (type) => {
    uni.navigateTo({
        url: '/pages_user/agreement/agreement?type=' + type
    });
};

const kfOpen = () => {
    uni.showModal({
        title: '联系方式',
        content: '如有疑问可与我们的客服联系，客服电话：13438325961。',
        confirmText: '复制电话',
        success(res) {
            if (res.confirm) {
                uni.setClipboardData({
                    data: '13438325961',
                    success: function () {
                        uni.showToast({
                            icon: 'none',
                            title: '电话复制成功'
                        });
                    }
                });
            }
        }
    });
};

const cacheSize = ref('0M');
onLoad(() => {
    getCache();
    getAppVersion();
});

const appVersion = ref('');
const getAppVersion = () => {
    const systemInfo = uni.getSystemInfoSync();
    appVersion.value = systemInfo.appWgtVersion; // app的版本号
};

const delAccountPopup = ref();
const psd = ref('');
const delAccount = async () => {
    uni.showModal({
        title: '提示',
        content: '删除账号会清空您账号中的所有数据且无法恢复，是否确定要执行此操作',
        confirmText: '确定',
        confirmColor: '#ff6842',
        success: function (res) {
            if (res.confirm) {
                delAccountPopup.value.open();
            }
        }
    });
};

const delAccountPopupConfirm = async () => {
    let res = await userApis.checkPSD(psd.value);

    if (res) {
        userApis.delAccount().then((res) => {
            uni.showToast({
                icon: 'none',
                title: '账号删除成功',
                duration: 2000,
                mask: true,
                success() {
                    delAccountPopupClose();
                    uni.clearStorageSync();
                }
            });

            setTimeout(() => {
                uni.redirectTo({
                    url: '/pages_user/Login_Register/Login_Register'
                });
            }, 2000);
        });
    } else {
        uni.showToast({
            icon: 'none',
            title: '登录密码不正确'
        });
    }
};

const delAccountPopupClose = () => {
    delAccountPopup.value.close();
    psd.value = '';
};

const logout = () => {
    uni.showModal({
        content: '是否要退出登录',
        async success(res) {
            if (res.confirm) {
                await userApis.logout();

                uni.showToast({
                    icon: 'none',
                    title: '退出成功',
                    mask: true
                });

                uni.clearStorageSync();

                setTimeout(() => {
                    uni.redirectTo({
                        url: '/pages_user/Login_Register/Login_Register'
                    });
                }, 2000);
            } else if (res.cancel) {
            }
        }
    });
};

const getCache = () => {
    plus!.cache.calculate((size) => {
        //size是多少个字节单位是b
        //你可以做下面相应的处理
        if (size < 1024) {
            cacheSize.value = size + 'B';
        } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
            cacheSize.value = Math.floor((size / 1024) * 100) / 100 + 'KB';
        } else if (size / 1024 / 1024 >= 1) {
            cacheSize.value = Math.floor((size / 1024 / 1024) * 100) / 100 + 'M';
        }
    });
};

const clearCache = () => {
    uni.showModal({
        title: '提示',
        content: '确定清除缓存吗?',
        success(res) {
            // 用户确定要删除
            if (res.confirm) {
                plus.cache.clear(function () {
                    uni.showToast({
                        title: '清除成功',
                        icon: 'none',
                        success() {
                            getCache();
                        }
                    });
                });
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.logout {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    padding: 30rpx 24rpx;
    background-color: #fff;
    view {
        background: #e4e4e6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        width: 100%;
        height: 92rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 92rpx;
        text-align: center;
    }
}

.items {
    padding: 8rpx 24rpx;

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88rpx;

        .title {
            font-size: 32rpx;
            color: #333333;
        }
        .more {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 22rpx;
            font-size: 28rpx;
            color: #999999;

            image {
                width: 17rpx;
                height: 29rpx;
            }
        }
    }
}

.CBTruleContent {
    width: 600rpx;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 32rpx;
    overflow: hidden;
    box-shadow: 0 0 40rpx 10rpx rgba(255, 104, 66, 0.4);

    .tips {
        text-indent: 1em;
        display: block;
        font-size: 28rpx;
        color: #ff6842;
        line-height: 1.5;
    }

    .title {
        width: 100%;
        padding: 12rpx 0 24rpx;
        text-align: center;
        font-size: 36rpx;
        color: #ff6842;
    }

    .input {
        display: flex;
        align-items: center;
        margin-top: 40rpx;
        gap: 20rpx;
        text {
            display: block;
            font-size: 28rpx;
            color: #ff6842;
        }
        input {
            color: #ff6842;
            flex: 1;
            border: 2rpx solid #ccc;
            border-radius: 8rpx;
            padding: 12rpx;
            font-size: 28rpx;
        }
    }

    .button {
        display: flex;
        align-items: center;
        margin-top: 40rpx;
        gap: 30rpx;

        view {
            flex: 1;
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx;
            border: 2rpx solid #ccc;
            text-align: center;
            font-size: 28rpx;
            color: #333;

            &:last-child {
                background-color: #ff6842;
                color: #fff;
                border: 2rpx solid #ff6842;
            }
        }
    }
}
</style>
